<%--
  Created by IntelliJ IDEA.
  User: admin
  Date: 2022/8/28
  Time: 18:39
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <title>我的首页</title>
    <link rel="stylesheet" href="css/zyhome.css">
    <style>
        #file {
            display: none;
        }
    </style>
</head>
<body>
<div class="login-box">
    <div class="leftpart">
        <h1><img id="image" src="${sessionScope.Customer.getCimage()}" width="100"
                 height="100">${sessionScope.Customer.getCusername()},欢迎!</h1>
        <form action="customer/modify">
            <div class="input-box">
                <div class="uppart">
                    <div class="upleftpart">
                        <div class="input-textid">
                            <label for="id">用户编号:&nbsp;</label>
                            <input type="text" value="${sessionScope.Customer.getCid()}" readonly name="cid" id="id">
                        </div>
                        <div class="input-textname">
                            <label for="name">用户名:&nbsp;</label>
                            <input type="text" value="${sessionScope.Customer.getCusername()}" name="cusername"
                                   id="name">
                        </div>

                        <div class="input-textpass">
                            <label for="password">密&nbsp;&nbsp;&nbsp;码:&nbsp; </label>
                            <input type="text" value="${sessionScope.Customer.getCpass()}" name="cpass" id="password">
                        </div>
                    </div>
                    <div class="imagepart">

                        <input type="file" id="file" name="file" onchange="showImg(this)">
                        <div>

                            <img width="25" height="25" style="cursor: pointer;" src="images/添加.png"
                                 onclick="document.getElementById('file').click()">
                            <span id="filename">请点击左侧更换头像</span>
                        </div>

                    </div>


                </div>
                <div class="input-textaddres">
                    <label for="address">居住地址:&nbsp; </label>
                    <input type="text" value="${sessionScope.Customer.getCaddress()}" name="caddress" id="address">
                </div>

                <div class="input-textphone">
                    <label for="phone">联系方式:&nbsp; </label>
                    <input type="text" value="${sessionScope.Customer.getCphone()}" name="cphone" id="phone">
                </div>

                <div class="input-textbalance">
                    <label for="balance">用户余额:&nbsp;</label>
                    <input type="text" readonly value="${sessionScope.Customer.getCbalance()}" name="cbalance"
                           id="balance">
                </div>


                <button class="input-btn" type="submit">
                    提交修改
                </button>


            </div>
        </form>
    </div>

    <span class="rightpart">


              <div class="input-box">
                  <a href="allrestaurant.jsp">
                      <button type="button" class="input-btn-big-blue">
                      进入点餐界面！
                  </button>
              </a>


                      <div class="input-textbalance">

                      <label>余额充值:</label>

                          <form action="customer/balancerecharge">
                      <input type="text" placeholder="输入您充值的金额" name="money">
                      <button class="input-btn" type="submit">充值</button>

                  </form>

                  <a href="customerOrderinf.html?cid=${sessionScope.Customer.getCid()}" ><button type="button" class="input-btn-big-green">查看我的订单</button>
                  </a> </div>
              </div>


          </span>
</div>
<%--      <table  class="table table-hover table-striped table-bordered">--%>
<%--          <thead>--%>
<%--          <tr>--%>
<%--              <td>菜品名</td>--%>
<%--              <td>价格</td>--%>
<%--              <td>操作</td>--%>
<%--          </tr>--%>
<%--          </thead>--%>

<%--          <tbody id="Dishesdisplay">--%>
<%--          </tbody>--%>
<%--      </table>--%>

<%--      <script charset="UTF-8" src="js/jquery-3.3.1.js"></script>--%>
<%--      <script charset="UTF-8"  src="js/bootstrap.js"></script>--%>

<%--<script>--%>
<%--      $(document).ready(function (){--%>
<%--         $.ajax({--%>
<%--           url:"dishes/getall",--%>
<%--             dataType:"json",--%>
<%--              success:function (ret) {--%>
<%--                  $("#Dishesdisplay").empty();--%>
<%--                  let dishlist=ret.dataZone.dishlist;--%>

<%--                  $.each(dishlist,function (index,item) {--%>
<%--                      var Tr = $('<tr></tr>');--%>
<%--                      var dishnameTd = $('<td></td>').text(item.dname);--%>
<%--                      var dishpriceTd = $('<td></td').text(item.dprice);--%>
<%--                      var buyBtn = $('<td></td>').html('<button class="btn btn-info">购买</button>');--%>
<%--                      Tr.append(dishnameTd).append(dishpriceTd).append(buyBtn);--%>
<%--                      $("#Dishesdisplay").append(Tr);--%>
<%--                  });--%>
<%--                  },--%>
<%--              error:function (eno){--%>
<%--               console.log(eno);--%>
<%--              }--%>
<%--              })--%>
<%--         })--%>
<%--</script>--%>

<script type="text/javascript">

    $('#file').change(function () {
        // 获取选择文件输入的路径value
        var filePath = $(this).val();

        if (filePath == '') {
            alert('你还没选择文件！');
            $('#filename').html('请点击左侧选择头像'); // 未选择文件
            return;
        }
        var arr = filePath.split("\\"); // 将路径以‘\’进行分割
        var fileName = arr[arr.length - 1]; // 最后一个数组元素即为文件名+后缀
        $('#filename').html(fileName);  // 选中了文件，显示文件名

    })


    function showImg(cell) {
        document.getElementById('image').src = window.URL.createObjectURL(cell.files[0])
    }
</script>
</body>
</html>
